0
378
Views¿Cómo convertir una imagen de archivo a byte [] ReactJS?
Quiero enviar una imagen al punto final de la API y el punto final acepta el byte [], ¿cómo puedo manejar esto? Mi código es: función ReactJS en el botón de carga, haga clic en:
let onClickHandler = () => { let data = new FormData() data.append('file', image); axios.post("/Contact/ContactForm/", { AttachedImage: data }, { headers: { 'Content-Type': 'multipart/form-data', 'X-Requested-With': 'XMLHttpRequest', } // receive two parameter endpoint url ,form data }) .then(res => { // then print response status console.log('binary Response......',res.statusText) }); }y mi método de controlador de punto final:
[HttpPost] public async Task<IActionResult> ContactForm([FromBody] Contact model) { try { model.CreationDate = DateTime.Now; await _contact.ContactForm(model); return Ok("Submitted Successfully"); } catch (Exception ex) { return this.BadRequest("Not Submitted Successfully" + ex.ToString()); } }y finalmente Clase Model.cs
public byte[] AttachedImage { set; get; }2 answers
Answer question0
quiero enviar una imagen al punto final de la api y el punto final acepta el byte [], ¿cómo puedo manejar esto?
Tenga en cuenta que el enlazador de modelos predeterminado no puede manejar una matriz de bytes que se establecería en null .
Para cargar un archivo de imagen y vincular los datos a una propiedad de matriz de bytes de su clase de modelo, puede probar las siguientes soluciones:
Solución 1 : convierta el archivo de imagen seleccionado en una cadena codificada en base64 y use un ByteArrayModelBinder para convertirlo en una matriz de bytes.
public class Contact { [ModelBinder(BinderType = typeof(ByteArrayModelBinder))] public byte[] AttachedImage { set; get; } public DateTime CreationDate { set; get; } //... //other properties //... }datos de prueba
{ "attachedImage": "iVBORw0KGgoAAAANSUhEUgAAAMsAAA.....", "creationDate": "2021-08-21T15:12:05" }Resultado de la prueba
Solución 2 : implemente y use un enlazador de modelos personalizado como el que se muestra a continuación para enlazar el archivo de imagen seleccionado a la matriz de bytes.
public class ImageToByteArrayModelBinder : IModelBinder { public Task BindModelAsync(ModelBindingContext bindingContext) { if (bindingContext == null) { throw new ArgumentNullException(nameof(bindingContext)); } // ... // implement it based on your actual requirement // code logic here // ... if (bindingContext.ActionContext.HttpContext.Request.Form.Files["AttachedImage"]?.Length > 0) { var fileBytes = new byte[bindingContext.ActionContext.HttpContext.Request.Form.Files["AttachedImage"].Length]; using (var ms = new MemoryStream()) { bindingContext.ActionContext.HttpContext.Request.Form.Files["AttachedImage"].CopyTo(ms); fileBytes = ms.ToArray(); } bindingContext.Result = ModelBindingResult.Success(fileBytes); } return Task.CompletedTask; } }Resultado de la prueba
0
Es difícil saber si la API lo aceptará, pero puede convertir el archivo en Uint8Array, que es una matriz con todos los bytes del archivo representados como números enteros.
let file: File = ... let uint8 = new Uint8Array(await file.arrayBuffer())